import QtQuick 1.1

Item {
    id: m_multi_text_input
    width: root_width
    height: item_title.height + item_content.height
    state: state_text

    property int root_width: 350
    property string state_text: ""
    property string text: "value"
    property string text_input: ""
    property string color_bg: "#000b64"
    property string color_border: "#000000"
    property string color_text: "#ffffff"
    property int text_size: 26

    signal search()

    function hide()
    {
        m_multi_text_input.state = "hide";
    }

//    Binding
//    {
//        target: input0
//        property: "text"
//        value: text_input
//    }

//    Rectangle {
//        id: rectangle_bg
//        color: color_bg
//        anchors.fill: parent
//    }

    Item {
        id: item_title
        height: 42
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0

        Rectangle {
            id: rectangle_circle
            x: 31
            y: 5
            width: 40
            height: 40
            color: "#00000000"
            radius: 97
            anchors.horizontalCenter: rectangle_line.left
            anchors.bottom: rectangle_line.top
            anchors.bottomMargin: 0
            smooth: true
            border.width: 2
            border.color: "#ffffff"
        }

        Rectangle {
            id: rectangle_line
            x: 50
            y: 45
            width: parent.width * 0.9
            height: 1
            color: "#ffffff"
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.right: parent.right
            anchors.rightMargin: 0
        }

        Text {
            id: text_title
            y: 9
            color: color_text
            text: m_multi_text_input.text
            anchors.left: rectangle_circle.right
            anchors.leftMargin: 5
            anchors.verticalCenter: rectangle_circle.verticalCenter
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: text_size

        }

        MouseArea {
            id: mouse_area1
            hoverEnabled: true
            anchors.fill: parent

            onClicked:
            {
                m_multi_text_input.state == "" ? m_multi_text_input.state = "hide" : m_multi_text_input.state = "";
            }
        }
    }

    Item {
        id: item_content
        height: column1.height + 5
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.top: item_title.bottom
        anchors.topMargin: 0

        Column {
            id: column1
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 5

            Item {
                id: item1
                y: 15
                height: input0.height
                anchors.right: parent.right
                anchors.rightMargin: 0
                anchors.left: parent.left
                anchors.leftMargin: 0

                MTextInput {
                    id: input0
                    x: 71
                    y: 0
                    width: 200
                    height: 35
                    text: ""
                    anchors.right: parent.right
                    anchors.rightMargin: 100
                    color_border: "#007aaa"
                    color_bg: "#ffffff"
                    color_text: "#000000"

                    onTextChanged:
                    {
                        m_multi_text_input.text_input = input0.text;
                    }
                }

                Text {
                    id: text1
                    x: 30
                    y: 9
                    color: "#ffffff"
                    text: ""
                    anchors.right: input0.left
                    anchors.rightMargin: 20
                    anchors.verticalCenterOffset: 0
                    anchors.verticalCenter: parent.verticalCenter
                    font.pixelSize: 22
                }

                Mbutton {
                    id: mbutton1
                    x: 263
                    y: 0
                    text_size: 22
                    textstring: "搜索"
                    pro_height: 40
                    pro_width: 80
                    anchors.verticalCenter: parent.verticalCenter

                    onButtonclick: search()
                }
            }
        }
    }

    states: [
        State {
            name: "hide"

            PropertyChanges {
                target: m_multi_text_input
                width: root_width * 0.5
            }

            PropertyChanges {
                target: item_content
                opacity: 0
            }

            PropertyChanges {
                target: input0
                height: 0
            }
        }
//        ,
//        State {
//            name: "over"
//            when: mouse_area1.containsMouse

//            PropertyChanges {
//                target: text_title
//                color: "orange"
//            }
//        }
    ]

    transitions: [
        Transition {
            from: ""
            to: "hide"
            SequentialAnimation {
                //                          id: playbanner
                //                          running: true
                PropertyAnimation { target: item_content; property: "opacity"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: input0; property: "height"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: m_multi_text_input; property: "width"; easing.type: Easing.OutCubic;}
            }
        },
        Transition {
            from: "hide"
            to: ""
            SequentialAnimation {
                //                          id: playbanner
                //                          running: true
                PropertyAnimation { target: m_multi_text_input; property: "width"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: input0; property: "height"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: item_content; property: "opacity"; easing.type: Easing.OutCubic;}
            }
        }
    ]

}
